<template>
    <div class="page-main game" v-scrollbar v-ploading="loading" icon="20">
        <div class="product-detail">
            <div class="product-image">
                <img src="https://genealogy.magicareamv.com/uploads/20250507/be0fb239ee3a0322b10800a130383cf4.png"
                    alt="商品图片">
            </div>
            <div class="product-info">
                <h1 class="title">限量发售·武侠秘籍</h1>
                <p class="price">￥199.00</p>
                <p class="desc">江湖独家秘籍，修炼者可提升50%内力修为，赠送限量收藏图册。</p>
            </div>
            <div class="action-bar">
                <button class="buy-btn">立即购买</button>
            </div>
        </div>
    </div>
</template>

<script setup name="box">
import { message } from 'ant-design-vue';
import { onMounted, ref, computed, watch, getCurrentInstance, onBeforeMount, onActivated, onDeactivated } from "vue";
const { proxy } = getCurrentInstance();
const loading = ref(true)
onActivated(() => {
    console.log("box-onActivated")
    loading.value = true
    setTimeout(() => {
        loading.value = false
    }, 300)
})
onDeactivated(() => {
    console.log("box-onDeactivated")
})
</script>

<style scoped>
.product-detail {
    padding: 0.32rem;
    background-color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei";
}

.product-image img {
    width: 100%;
    border-radius: 0.2rem;
}

.product-info {
    margin-top: 0.4rem;
}

.product-info .title {
    font-size: 0.36rem;
    font-weight: bold;
    margin-bottom: 0.2rem;
    color: #333;
}

.product-info .price {
    font-size: 0.32rem;
    color: #e60012;
    margin-bottom: 0.2rem;
}

.product-info .desc {
    font-size: 0.32rem;
    color: #666;
    line-height: 1.6;
}

.action-bar {
    margin-top: 0.6rem;
    display: flex;
    justify-content: center;
}

.buy-btn {
    background: linear-gradient(to right, #f76b1c, #fca13d);
    color: #fff;
    padding: 0.3rem 1.2rem;
    border: none;
    border-radius: 0.6rem;
    font-size: 0.32rem;
}
</style>